<template>
  <BasicLayout>
    <template #wrapper>
      <div class="liveView">
        <video-player
          ref="videoPlayer"
          class="vjs-custom-skin"
          :options="playerOptions"
          @ready="onPlayerReadied"
          @timeupdate="onTimeupdate"
        />

        <div class="inputWrapper">
          <div class="form-group row">
            <label for="" class="col-sm-4 col-form-label">HLS: </label>
            <div class="col-sm-8">
              <input v-model="streams.hls" class="form-control" type="text" placeholder="HLS url here">
            </div>
          </div>
        </div>
        <div class="buttonWrapper">
          <button class="btn btn-primary" type="button" @click="enterStream">Apply</button>
        </div>

      </div>
    </template>
  </BasicLayout>
</template>

<script>
import { startLive } from '@/api/admin/sys-course'

import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import 'videojs-contrib-hls'
import 'videojs-flash'
export default {
  name: 'LiveWindowVue',
  components: {
    videoPlayer
  },
  data() {
    return {
      courseInfo: {},
      initialized: false,
      currentTech: '',
      streams: {
        rtmp: '',
        hls: ''
      },
      playerOptions: {
        overNative: true,
        autoplay: false,
        controls: true,
        techOrder: ['html5'],
        sourceOrder: true,
        flash: {
          hls: { withCredentials: false }
        },
        html5: { hls: { withCredentials: false }},
        sources: [
          {
            withCredentials: false,
            type: 'application/x-mpegURL',
            src: 'http://ivi.bupt.edu.cn/hls/btv1hd.m3u8'
          }
        ],
        controlBar: {
          timeDivider: false, // 时间分割线
          durationDisplay: false, // 总时间
          progressControl: true, // 进度条
          customControlSpacer: true, // 未知
          fullscreenToggle: true // 全屏
        }
      }
    }
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player
    },
    currentStream() {
      return this.currentTech === 'Flash' ? 'RTMP' : 'HLS'
    }
  },
  created() {
    this.courseInfo = this.$route.params
    this.startLive()
  },
  methods: {
    async startLive(){
      const res = await startLive({
        id: this.courseInfo.id
      })
      console.log(res)
    },
    onPlayerReadied() {
      if (!this.initialized) {
        this.initialized = true
        this.currentTech = this.player.techName_
      }
    },
    // record current time
    onTimeupdate(e) {
      console.log('currentTime', e.cache_.currentTime)
    },
    enterStream() {
      this.playerOptions.sources[0].src = this.streams.hls
      this.playerOptions.autoplay = true
    },
    changeTech() {
      if (this.currentTech === 'Html5') {
        this.playerOptions.techOrder = ['html5']
      } else if (this.currentTech === 'Flash') {
        this.playerOptions.techOrder = ['flash']
      }
      this.playerOptions.autoplay = true
    }
  }
}
</script>
<style scoped>

</style>
